<!--
 * File: bookIndex.vue
 * Project: jjwww-web
 * File Created: Sunday, 2nd November 2025 7:07:28 pm
 * Description: 
 * -----
 * Last Modified: Sunday, 2nd November 2025 9:39:52 pm
 * -----
 * Copyright © 2023 - 2025 Newland Limited. All rights reserved.
 -->
<template>
  <div class="main">
    <div class="tip">
      <h1>{{ currentTitle }}</h1>
      <p>今日精选推荐</p>
      <el-button round>立即购买</el-button>
    </div>
    <div class="banner">
      <el-carousel :interval="5000" arrow="always" @change="bannerChange">
        <el-carousel-item
          v-for="(item, index) in list"
          :key="index"
          style="height: 500px"
        >
          <img :src="item.img" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerIndex: 0,
      list: [
        {
          title: "窗边的小豆豆",
          img: "https://img13.360buyimg.com/n5/s720x720_jfs/t1/156244/40/44149/102903/669dd837F70ba0cfd/1ae9ecd9bdc4d3b8.jpg.avif",
        },
        {
          title: "美丽黑暗",
          img: "https://img14.360buyimg.com/n5/s720x720_jfs/t1/308623/20/12153/251463/685a6c08F73117ded/1f3432eab14fb5bd.jpg.avif",
        },
        {
          title: "我在蓬皮杜当保安",
          img: "https://img11.360buyimg.com/n5/s720x720_jfs/t1/314610/34/11828/163135/685a6c08Fbfacf06d/cfd02210dc0782f4.jpg.avif",
        },
      ],
    };
  },
  computed: {
    currentTitle() {
      return this.list[this.bannerIndex].title;
    },
  },
  methods: {
    bannerChange(data) {
      this.bannerIndex = data;
    },
  },
};
</script>

<style scoped>
.main {
  padding: 0 20px;
  height: calc(100vh - 220px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: oldlace;
}
.tip {
  display: inline-block;
  text-align: center;
  max-width: 40%;
  margin-right: 10px;
}
.banner {
  text-align: center;
  display: inline-block;
  width: 60%;
  height: 400px;
  overflow: hidden;
  /* max-height: 70%; */
}

banner img {
  object-fit:cover;
  width: 100%;
  /* max-height:  400px; */
}
.tip * {
  margin-top: 30px;
}
.tip h1 {
  width: 300px;
  font-size: 55px;
}

.tip p {
  color: #ff2832;
}

::v-deep .el-carousel__container, ::v-deep el-carousel {
  height: 400px;
   overflow: hidden;
}
</style>
